<template>
  <div id="app">
    <div id="a" @click="a" ref="a"></div>
    <!-- 面包屑导航栏 -->
    <el-breadcrumb class="bre-nav" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">权限</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据列表 -->
    <div class="dataList">
      <i class="dataList-left el-icon-tickets">数据列表</i>
      <el-row class="dataList-right">
        <el-button @click="block" οnclick="a.style.display='none';tableAdd.style.display='none'">添加</el-button>
      </el-row>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width:1300px" class="tables">
      <el-table-column prop="num" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="menuname" label="菜单名称" width="180" align="center"></el-table-column>
      <el-table-column prop="menuj" label="菜单级数" width="100" align="center"></el-table-column>
      <el-table-column prop="webn" label="前端名称" width="180" align="center"></el-table-column>
      <el-table-column prop="webm" label="前端图标" width="100" align="center">
          <i class="el-icon-document-copy"></i>
      </el-table-column>
      <el-table-column prop="zip" label="是否显示" width="120" align="center">
        <el-switch v-model="value"></el-switch>
      </el-table-column>
      <el-table-column prop="last" label="排序" width="150" align="center"></el-table-column>
       <el-table-column label="设置" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看下级</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="deletes(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      background
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15,]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      style="float:right;"
    ></el-pagination>
    <!-- 添加数据 -->
    <div class="tableAdd" ref="adds">
      <div class="table-tit"><span>添加用户</span><b @click="x">✖</b></div>
      <form name="my_form" method="POST" class="table-con">
        <p>菜单名称：<input type="text" v-model="menuname"/></p>
        <p>菜单级数：<input type="text" v-model="menuj"/></p>
        <p>前端名称：<input type="text" v-model="webn"/></p>
        <p>输入密码：<input type="text" /></p>
        <p>备注：<textarea cols="35" rows="8"></textarea></p>
        <br />
        <label for class="table-label">是否启用：</label>
        <input type="radio" name="radio1" value="radio单选项1" />是
        <input type="radio" name="radio1" value="radio单选项2" />否
        <el-row class="table-row">
          <el-button size="small">取消</el-button>
          <el-button type="primary" size="small" @click="add">确定</el-button>
        </el-row>
      </form>
    </div>
  </div>
</template>
<script>
export default {
    data() {
      return {
        input:'',
        value: "true",
        menuname:"",
        menuj:"",
        webn:"",
        tableData: [
          {
            num: "1",
            menuname:"商品",
            menuj:"一级",
            webn:"pms",
            webm:'',
            last:0,
          },
          {
            num: "2",
            menuname:"订单",
            menuj:"一级",
            webn:"oms",
            webm:"",
            last:0,
          },
          {
            num: "3",
            menuname:"营销",
            menuj:"一级",
            webn:"sms",
            webm:"",
            last:0,
          },
          {
            num: "4",
            menuname:"权限",
            menuj:"一级",
            webn:"ums",
            webm:"",
            last:0,
          },
        ],
         // 分页数据
      currentPage: 1,
      pageSize: 5,
      total: 0, // 总条目数
      multipleSelection: [],
      border: true,
      select: "",
      input: "",
      value1: "",
      border: true,
      value: "",
      }
    },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    deletes:function(index){
      this.tableData.splice(index,1)
    },
    block:function(){
      this.$refs.adds.style.display="block";
      this.$refs.a.style.display="block"
    },
    a:function(){
      this.$refs.adds.style.display="none"
      this.$refs.a.style.display="none"
    },
    x:function(){
      this.$refs.adds.style.display="none"
      this.$refs.a.style.display="none"
    },
    add:function(){
      this.tableData.push({
        num:6,
        menuname:this.menuname,
        menuj:this.menuj,
        webn:this.webn,
        last:"0",
      })
      this.$refs.adds.style.display="none"
      this.$refs.a.style.display="none"
    }
  },

};

</script>
<style scoped>
/* 面包屑导航栏 */
.bre-nav {
  height: 30px;
  line-height: 50px;
  margin-left: 30px;
}

/* 数据列表 */
.dataList {
  width: 1300px;
  height: 50px;
  border: 1px #ccc solid;
  margin: 20px 0 20px 30px;
}
.dataList-left {
  float: left;
  margin-left: 30px;
  padding-top: 15px;
}
.dataList-right {
  float: right;
  margin-right: 30px;
  padding-top: 5px;
}
/* 表格 */
.tables {
  margin-left: 30px;
}
.pagination {
  margin: 30px 0 0 750px;
}

#a{ 
position:fixed;
width:100%;
height:100%;
background:rgba(200,200,200,0.6);
z-index:1;
display:none;
}
.tableAdd{ 
width:600px;
height:550px;
/*表单居中设置*/
position:absolute;
left:50%;
top:50%;
margin-top:-250px;
margin-left:-250px;
background:#fff;
z-index:2;
display:none;
}
.table-con{
  margin-top:80px;
}
.table-con p{
  margin:20px 0 0 100px;
}
.table-con p input{
  width:268px;
  height:30px;
}
.table-label{
  margin-left:80px;
}
.table-row{
  margin:40px 0 0 450px;
}
.table-tit{
  width:100%;
  height:10px;
  margin-top:20px;
}
.table-tit span{
  display: inline-block;
  float:left;
  margin-left:20px;
}
.table-tit b{
  display:inline-block;
  float:right;
  margin-right:20px;
  cursor:pointer;
}
</style>
